<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分组管理</title>
    <style>
        :root {
            --primary-color: #2196F3;
            --bg-color: #f5faff;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: var(--bg-color);
        }

        .container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }

        .participant-list {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 30px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }

        .group-section {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .group-card {
            background: #fff;
            border: 2px solid var(--primary-color);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 5px;
        }

        .leader-name {
            color: #e53935;
            font-weight: bold;
        }

        .qr-box {
            text-align: center;
            margin: 20px 0;
        }

        #qrcode {
            display: inline-block;
            padding: 10px;
            background: white;
            border-radius: 10px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div class="container">
       <h1>福田区小学数学AI赋能教育<br>研讨工作坊2.0分组管理</h1>
        
        <!-- 二维码生成 -->
        <div class="qr-box">
            <div id="qrcode"></div>
            <p>签到二维码</p>
        </div>

        <!-- 功能按钮 -->
        <div>
            <button onclick="randomGroup()">开始随机分组</button>
            <button onclick="exportExcel()">导出数据</button>
            <button onclick="resetData()" style="background:#f44336">重置数据</button>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-card">
                <h3>总签到人数</h3>
                <p id="totalCount">0</p>
            </div>
            <div class="stat-card">
                <h3>AI成员</h3>
                <p id="aiCount">0</p>
            </div>
            <div class="stat-card">
                <h3>兼职教研员</h3>
                <p id="partCount">0</p>
            </div>
        </div>

        <!-- 签到人员列表 -->
        <div class="participant-list">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>学校</th>
                        <th>身份</th>
                    </tr>
                </thead>
                <tbody id="participantTable"></tbody>
            </table>
        </div>

        <!-- 分组结果显示 -->
        <div id="groups" class="group-section"></div>
    </div>

    <script>
        // 配置固定组长名单
        const FIXED_LEADERS = [
            '黄涛', '黄涛1', '黄涛2', '黄涛3',
            '黄涛4', '黄涛5', '黄涛6', '黄涛7'
        ];

        // 初始化二维码
        new QRCode(document.getElementById("qrcode"), {
            text: window.location.href.replace('group','sign'),
            width: 128,
            height: 128
        });

        // 获取签到数据
        let attendees = JSON.parse(localStorage.getItem('attendees')) || [];

        // 初始化显示
        updateStats();
        renderParticipants();

        function updateStats() {
            const aiCount = attendees.filter(a => a.role === 'AI').length;
            const partCount = attendees.filter(a => a.role === 'part').length;
            
            document.getElementById('totalCount').textContent = attendees.length;
            document.getElementById('aiCount').textContent = aiCount;
            document.getElementById('partCount').textContent = partCount;
        }

        function renderParticipants() {
            const tbody = document.getElementById('participantTable');
            tbody.innerHTML = attendees.map(a => `
                <tr>
                    <td>${a.name}</td>
                    <td>${a.school}</td>
                    <td>${a.role === 'AI' ? 'AI赋能' : '兼职教研'}</td>
                </tr>
            `).join('');
        }

        // 随机分组功能
        function randomGroup() {
            const aiMembers = attendees.filter(a => a.role === 'AI');
            
            const leaders = FIXED_LEADERS.map(name => 
                aiMembers.find(m => m.name === name)
            ).filter(Boolean);

            if(leaders.length !== FIXED_LEADERS.length) {
                const missing = FIXED_LEADERS.filter(name => 
                    !aiMembers.some(m => m.name === name)
                );
                return alert(`缺少固定组长：${missing.join(', ')}`);
            }

            const members = aiMembers.filter(m => 
                !FIXED_LEADERS.includes(m.name)
            );

            const shuffled = shuffle(members);
            const groups = leaders.map(leader => ({
                leader: leader,
                members: []
            }));

            shuffled.forEach((member, index) => {
                groups[index % 8].members.push(member);
            });

            renderGroups(groups);
        }

        // 渲染分组结果
        function renderGroups(groups) {
            const groupHTML = groups.map((group, i) => `
                <div class="group-card">
                    <h3>第 ${i+1} 组</h3>
                    <p><strong>组长：</strong>
                        <span class="leader-name">${group.leader.name}</span>（${group.leader.school}）
                    </p>
                    <div><strong>组员（${group.members.length}人）：</strong></div>
                    <div style="margin-top:8px">
                        ${group.members.map(m => 
                            `${m.name}（${m.school}）<br>`
                        ).join('')}
                    </div>
                </div>
            `).join('');

            document.getElementById('groups').innerHTML = groupHTML;
        }

        // 导出Excel功能
        function exportExcel() {
            const csvContent = [
                ['姓名', '学校', '身份', '签到时间'].join(','),
                ...attendees.map(a => [
                    a.name,
                    a.school,
                    a.role === 'AI' ? 'AI赋能' : '兼职教研',
                    new Date(a.timestamp).toLocaleString()
                ].join(','))
            ].join('\n');

            const blob = new Blob(["\ufeff"+csvContent], {type: 'text/csv;charset=utf-8;'});
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `签到数据_${new Date().toLocaleDateString()}.csv`;
            link.click();
        }

        // 数据重置功能
        function resetData() {
            if(confirm('确定要清空所有数据吗？')) {
                localStorage.removeItem('attendees');
                attendees = [];
                updateStats();
                renderParticipants();
                document.getElementById('groups').innerHTML = '';
            }
        }

        // 实用工具函数
        function shuffle(array) {
            return array.sort(() => Math.random() - 0.5);
        }
    </script>
</body>
</html>